<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!-- 声明式渲染  无需直接操作DOM 
    渐变式:
   Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件 -->
  <div id="app">
    <h2>{{count}}</h2>
    <!-- 这里@是v-on:的简写 -v -->
    <button @click="add">+</button>
    <!-- 有无括号的区别就是是否传参 其他无异 -->
    <button @click="sub(2)">
      -
    </button>
    <!-- 如果想要在传参的同时还能获取道事件对象 需要将事件对象传过去 写法是 $event -->
    <button @click="all(2,$event )">*</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  // el有两种写法 
  // 创建Vue实例对象的时候配置el属性
  // 先创建Vue实例,随后再通过$mount指定el的值
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        count: 0
      }
    },
    // 所有的事件函数需要写再原型对象的methods属性里
    methods: {
      add(e) {
        // 当形参不接受实参的时候 e就是事件对象
        console.log(e);
        this.count++
      },
      sub(e) {
        // 当形参接受实参的时候 e就是这个实参 而不是事件对象
        console.log(e);
        this.count -= e
      },
      all(e, event) {
        // 这里第二个参数就是接受额事件对象 第一参数接受的是变量
        console.log(e, event);
        this.count *= e
      }
    }
  })
</script>

</html>